<template>
	<div> 
        <van-nav-bar
        :title=msg
        left-text="返回"
        left-arrow
        @click-left="goback"
        />

        <div class='goodsImgWrap'>
            <img :src= goodsImgUrl />
        </div>
        <p>{{goodsTitle}},{{describe}},￥{{price}}</p>

        <van-sku
        v-model="showBase"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :hide-stock="sku.hide_stock"
        :quota-used=0
        :reset-stepper-on-hide=false
        :message-config={}
        @sku-selected='switchProductType'
        @add-cart="onAddCartFn"
        />

        <!--这是footer栏-->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" 
                text="客服"  @click="onHelpBtn" />
            <van-goods-action-icon icon="cart-o" 
                text="购物车"@click="goToCartBtn"
                :info='cartGoods_mini_num'/>
            <van-goods-action-button type="warning" 
                text="加入购物车" @click="onClickButton" />
            <van-goods-action-button type="danger" 
                text="立即购买" />
        </van-goods-action>
	</div>
</template>

<script>
import axios from 'axios'
import API_LIST from '@/APIList.config'

export default{
	name:'goodsProduct',
	data(){
		return {
            msg:'产品详情页',
            goodsId:'',
            goodsTitle:'',
            goodsImgUrl:'',
            describe:'',
            price:'',
            cartGoods_mini_num:0,

            showBase:false,
            goods:{},
            sku:
            { 
                tree: [
                {
                k: '产品类别', // skuKeyName：规格类目名称
                v: [
                    {
                    id: '30349', // skuValueId：规格值 id
                    name: '红色', // skuValueName：规格值名称
                    //imgUrl: 'https://img.yzcdn.cn/2.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                    //previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
                    },
                    {
                    id: '1215',
                    name: '蓝色',
                    //imgUrl: 'https://img.yzcdn.cn/2.jpg',
                    //previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
                    }
                ],
                k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                    id: 2259, // skuId，下单时后端需要
                    price:'', // 价格（单位分）
                    s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                    s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
                    s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                    stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                messages: [
                    {
                    // 商品留言
                    datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                    multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                    name: '留言', // 留言名称
                    type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                    required: '1', // 是否必填 '1' 表示必填
                    placeholder: '' // 可选值，占位文本
                    }
                ],
                hide_stock: false // 是否隐藏剩余库存
            }
        }
    
    },
    created(){
        // console.log(this.$route.query)

        //只传递Id再去查询安全一些
        //console.log(this.$route.query._goodsObjId);
        let _goodsId=this.$route.query._goodsObjId;
        let _collectionName=this.$route.query._collectionsName

        this.getGoodsInfoFn(_goodsId,_collectionName);

        //给sku组件用的
        this.goodsId= _goodsId;
        
        //页面刚打开时，要加载之前保存的产品数据
        //保存的是字符，所以要先转为对象,才能进行键值对的使用
        //？表示true分支；：表示false分支
        var xx = localStorage.cartDataInfo
                    ?JSON.parse(localStorage.cartDataInfo)
                    :[];
        console.log(xx)
        //清除本地存储中的cartDataInfo中的数据
        //localStorage.removeItem('cartDataInfo')

        //购物车的小红点数字
         this.total_cartGoodsNum();

        
    },
	methods:{
        //客服按钮
        onHelpBtn(){
            this.$dialog.alert({message : '小蜜正在路上，请稍等'})
        },
        //统计当前购物车中商品总数
        total_cartGoodsNum(){
            let _temp = localStorage.cartDataInfo
                        ?JSON.parse(localStorage.cartDataInfo)
                        :[];
            let _n= 0 ;
            for (let i=0; i<_temp.length; i++){
                _n += _temp[i]._num;
            }
            this.cartGoods_mini_num= _n;
        },

        //根据Id获得商品信息
        getGoodsInfoFn(_gId,_collectionName){
            axios.get( API_LIST.getGoodsInfo,{
                params:{
                    _id:_gId,
                    _c:_collectionName
                }
            })
            .then(_d=>{
                //console.log(_d.data);
                this.goodsTitle= _d.data.name;
                this.goodsImgUrl=_d.data.img;
                this.describe= _d.data.describe;
                this.price= _d.data.price;

                //给添加购物车组件中goods的
                this.goods.picture = _d.data.img;
                this.sku.price= _d.data.price;
                
            })
        },
        //点击购物车，跳转到购物车页面
        goToCartBtn(){
            if( localStorage.userName ){
                this.$router.push({path:'/cart'});
                localStorage.setItem('inxState',2);
            }else{
                this.$dialog.alert({message : '请登录您的账号！'})
                .then(()=>{
                    this.$router.push({path:'/userLogin'});
                    localStorage.setItem('inxState',3);
                }
                )
            }


        },
        //选定产品后添加到购物车
        onAddCartFn(_d){
            //console.log(_d)

            //在真正的生产环境中，_d数据是要发给后端接口的
            //判断在cart数据中是否有相同的产品;true表示有相同商品
            let _isTrue= false;
            let _tempObj={
                _id:_d.goodsId,
                _price:this.price,
                _num:_d.selectedNum,
                _goodsName:this.goodsTitle,
                _goodsImg:this.goodsImgUrl
            }
            //console.log(_tempObj);

            //已经保存在本地存储中的数据
            let _cartData = localStorage.cartDataInfo
                        ?JSON.parse(localStorage.cartDataInfo)
                        :[];
            
            for (let i=0;i<_cartData.length;i++){
                if(_cartData[i]._id == _tempObj._id){
                    _cartData[i]._num += _tempObj._num;
                    _isTrue= true;
                    break;
                }
            }
            //没有相同的产品，才直接push
            if(!_isTrue) {

                _cartData.push( _tempObj )
			}

            //对象没有办法存入localStorage,必须转成字符
            localStorage.cartDataInfo= JSON.stringify(_cartData);

            //给一个添加到购物车的提示
            this.$dialog.alert({message : '添加到购物车成功'})
            .then(()=>{
                this.showBase=false;
                this.total_cartGoodsNum();
            })


        },
        //切换产品的类型
        switchProductType(){
            this.sku.list[0].price=this.sku.price*100;
        },

        //加入购物车
        onClickButton(){
            if( localStorage.userName ){
                this.showBase=true;
            }else{
                this.$dialog.alert({message : '请登录您的账号！'})
                .then(this.$router.push({path:'/userLogin'}))
            }


        },
        goback(){
            this.$router.go(-1);
        }
    }
}
</script>
<style scoped>
	.goodsImgWrap{
		width: 100%;height: 350px;overflow: hidden;margin:0 auto;
	}
	.goodsImgWrap img{ width: 100%;height: 350px; }
</style>